<template>
	<div class="fd-noticeTip">
			<transition name='noticeTip-fade'>
				<p class="center-p" v-show="type=='center'" v-bind:style='tipStyle'>{{message}}</p>
			</transition>

			<transition name='noticeTip-fade'>
				<div class="top-noticeTip" v-show="type=='top'" v-bind:style='tipStyle' ref='noticeTipTop'><p class="top-p" >{{message}}</p><span @click='SpanClick'>&times;</span></div>
			</transition>

			<transition name='noticeTip-fade'>
				<p class="bottom-p" v-show="type=='bottom'" v-bind:style='tipStyle'>{{message}}</p>
			</transition>
	</div>
</template>
<script>
	export default {
		name: 'noticeTipBox',
		props:{
			message:{type:String},
			type:{type:String},
			color:{type:String},
			backgroundColor:{type:String},
			tipStyle:{type:Object}
		},
		methods: {
			SpanClick() {
				this.$refs.noticeTipTop.style.display='none'
			}
		}
	}
</script>
<style>
.fd-noticeTip{
  display: flex;
  justify-content:center;
}
.fd-noticeTip .center-p{
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  font-size: 0.7rem;
  height: 1.5rem;
  border-radius:0.75rem;
  color: white;
  background: #FFBB2B;
  line-height: 1.5rem;
  padding: 0 1rem;
  z-index: 999;
}
.fd-noticeTip .top-noticeTip{
  display: flex;
  font-size: .7rem;
  position: absolute;
  top: 2.2rem;
  line-height: 2.2rem44px;
  background: #f7e4d3;
  color: #A2A9B0;
  width: 100%;
  z-index: 999;
}
.fd-noticeTip .top-noticeTip p{
  width: 100%;
  text-align: left;
  padding-left: 0.75rem;
}
.fd-noticeTip .top-noticeTip span{
  padding-right: .75rem;
  width: 1.1rem;
}
.fd-noticeTip .bottom-p{
  font-size: .7rem;
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #f7e4d3;
  color: #A2A9B0;
  z-index: 999;
}
</style>
